<template>
  <div>
    <div class="title">
      <div>
        <i class="icon-xiangzuo iconfont"></i>
      </div>
      <div class="read">阅读</div>
      <div>
        <i class="icon-shenglvehao iconfont"></i>
      </div>
    </div>
    <swiper></swiper>
    <div class="content">
      <div class="item" v-for="item of movie" :key="item._id" @click="toDetail(item._id)">
        <img :src="item.pic" alt="" />
        <div>{{ item.title }}</div>
          <span id="star" v-for="(item,index) of item.star" :key="index">
            <img v-if="item >= 1.5" src="star.png" alt="" />
            <img v-else-if="item >= 0.5" src="ban-star.png" alt="" />
            <img v-else src="none-star.png" alt="" />
          </span>
        {{item.rating}}
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "./component/Swiper.vue";
export default {
  data() {
    return {
      movie: [],
    };
  },
  components: {
    Swiper,
  },
  mounted() {
    this.$http("http://47.108.197.28:4000/api/movie/top250").then((res) => {
      res.data.res.forEach((item) => {
        var { rating } = item;
        item.star = this.handleStar(rating);
      });
      this.movie = res.data.res;
      // console.log(res.data.res);
    });
  },
  methods: {
    handleStar(num) {
      var arr = [];
      for (var i = 0; i < 5; i++) {
        if (num > 2) {
          arr.push(2);
        } else if (num > 0) {
          arr.push(Number(num.toFixed(2)));
        } else {
          arr.push(0);
        }
        num = num - 2;
      }
      return arr;
    },
    toDetail(val){
      this.$router.push(`/Detail/${val}`)
    }
  },
};
</script>

<style scoped>
.title {
  background: #405f88;
  color: white;
  display: flex;
  /* justify-content: space-around; */
  padding: 30px;
  font-size: 40px;
}
.title i {
  font-size: 45px;
}
.title .read {
  width: 85%;
  text-align: center;
}
.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20px;
}
.content .item {
  padding-top: 20px;
}
.content .item>img {
  width: 215px;
  height: 300px;
}
.content > div:last-child {
  align-self: flex-start;
}
#star>img{
  width: 30px;
  height: 30px;
}
</style>